<template>

  <div class="home-container">
    <div class="box">
      <!-- 左侧导航栏 商品列表分类-->
      <van-sidebar v-model="activeKey" class="vanSidebar">
        <van-sidebar-item title="零食小吃" />
        <van-sidebar-item title="酒水饮料" />
      </van-sidebar>
    </div>

      <!-- 右侧 商品信息-->
    <div class="content">
      <Bread v-if="this.activeKey===0" :totalPrice.sync="totalPrice"></Bread>

      <Drinks v-if="this.activeKey===1" :milkPrice.sync="milkPrice"></Drinks>
      <!-- 提交订单组件 -->
      <div>
       <van-submit-bar
        :price.sync="fourPrice"
        button-text="立即结算"
        @submit="onSubmit" />
      </div>
    </div>

  </div>
</template>

<script>
import { setItem, getItem } from '@/utils/localStorage.js'
import Drinks from './component/drinks' // 饮料类
import Bread from './component/bread' // 面包类
export default {

  data () {
    return {
      activeKey: 0, // 当前导航索引
      isShow: false,
      fourPrice: 0, // 合计
      totalPrice: 0, // 面包类的总价
      milkPrice: 0, // 牛奶类的总价
      buyBreadInfo: {}
    }
  },
  components: {
    Bread, Drinks
  },
  watch: {
    milkPrice(newprice) { // 牛奶类总价
      this.fourPrice = (newprice + this.totalPrice) * 100
    },
    totalPrice(newprice) { // 面包类总价
      this.fourPrice = (newprice + this.milkPrice) * 100
    }
  },
  methods: {
    onSubmit() { // 下单
      setItem('totalPrice', this.fourPrice) // 将总价存入本地存储
      // 点击下单 跳到新的页面
      var totalPrices = getItem('totalPrice')
      if (totalPrices > 0) {
        this.$router.push('/payment')
      } else {
        this.$toast('东西不买？')
      }
    }
  }
}
</script>

<style scoped lang="less">
.box{
  width: 200px;
}
.home-container{
  display: flex;
  .vanSidebar {
    position: fixed;
  }
  body{
    padding-left: 10px;
  }
}
</style>
